import React,{Component} from 'react'
import {HeaderBox} from './style_header'
import {Logo,Nav,NavList,NavSearch,Addition,Button,SearchBox,SearchInfo,SearchTitle,SearchInfoSwitch,SearchList,SearchItem} from './style_header';
import { CSSTransition } from 'react-transition-group';
import {connect} from 'react-redux';
import {getHandlerBlurAction,getHandlerFoucsAction,getListAction,getHandlerMouseEnter,getHandlerMouseLeave,getHandlerChangePage} from '../../store/actionCreator'
import {Link} from 'react-router-dom'
class Header extends Component{
    constructor(){
        super();
    }
    // handlerFoucs(){
    //     this.setState({
    //         foucs:true,
    //     });
    // }
    // handlerBlur(){
    //    // console.log('123')
    //     this.setState({
    //         foucs:false,
    //     });
    // }
    showSearchList =(show,moveIn)=>{
        let {page,list} = this.props;
        var newList = list.toJS();
        var pageList = []
        if(newList.length){
            for(let i = (page-1)*10;i<page*10;i++){
                pageList.push(<SearchItem key={newList[i]}>{newList[i]}</SearchItem>)
            }
        }
        if(show || moveIn){
            return(
                <SearchInfo onMouseEnter={this.props.handlerMouseIn} onMouseLeave={this.props.handlerMouseOut}>
                <SearchTitle>热门搜索
                    <SearchInfoSwitch onClick={()=>{this.props.changePage(this.props.page,this.props.totalPages,this.spinIcon)}}>
                    {/* ref可以获取dom */}
                    <i className="iconfont" ref={(icon)=>{this.spinIcon = icon}}>&#xe794;</i>
                    换一批</SearchInfoSwitch>
                </SearchTitle>
                <SearchList>
                    {/* {this.props.list.map((item)=>{
                        // 这边要return
                        // 在class才能获取数据
                        // return <SearchItem key={item}>{item}</SearchItem>
                    })} */
                    pageList
                    }
                </SearchList>
            </SearchInfo>
            )
        }else{
            return null;
        }
    }
    render(){
        let {list} = this.props;
        return(
            <React.Fragment>
                <HeaderBox>
                    <Logo></Logo>
                    <Nav>
                        <NavList className='left'>首页</NavList>
                        <NavList className='left'>下载APP</NavList>
                        <SearchBox>
                            {/* classNames的s不能忘 */}
                            <CSSTransition
                                in = {this.props.foucs}
                                timeout={300}
                                classNames = 'siler'
                            >
                                <NavSearch className = {this.props.foucs?'foucs':''} onFocus={()=>{this.props.handlerFoucs(list)}}
                                onBlur={this.props.handlerBlur}></NavSearch>
                            </CSSTransition>
                            <i className={this.props.foucs?'icon iconfont foucs':'icon iconfont'}>&#xe631;</i>
                           {this.showSearchList(this.props.foucs,this.props.mouseIn)}
                        </SearchBox>
                        <NavList className='right'>
                        
                        <i className="icon iconfont" style={{fontSize:'18px'}}>&#xe636;</i>
                        </NavList>
                        <Link to='/login'>
                        <NavList className='right'>登录</NavList> 
                        </Link>
                    </Nav>
                    <Addition>
                        <Button className='reg'>注册</Button>
                        <Button className='writing'>
                        <i className ='icon iconfont' style={{marginRight:'3px'}}>&#xe615;</i>
                        写文章</Button>
                    </Addition>
                </HeaderBox>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state) =>{
    return{
        foucs:state.get('header').get('foucs'),
        list:state.get('header').get('list'),
        page:state.get('header').get('page'),
        mouseIn:state.get('header').get('mouseIn'),
        totalPages:state.get('header').get('pageTotal')
    }
}
const mapDispatchToProps = (dispatch)=>{
    return{
        handlerFoucs(list){
            let action = getHandlerFoucsAction();
            dispatch(action);
           if(list.size === 0){
            let action1 = getListAction();
            dispatch(action1);
           }
        },
        handlerBlur(){
            let action = getHandlerBlurAction();
            dispatch(action);
        },
        handlerMouseIn(){
           let action = getHandlerMouseEnter();
           dispatch(action);
        },
        handlerMouseOut(){
            let action = getHandlerMouseLeave();
           dispatch(action);
        },
        changePage(page,totalPages,icon){
            //console.log(icon);
            // 换一批的算法
            var originAngel = icon.style.transform.replace(/[^0-9]/ig,'');
            if(originAngel){
                originAngel = parseInt(originAngel,10);
            }else{
                originAngel = 0;
            }
            icon.style.transform = 'rotate('+(originAngel+360)+'deg)';
            //console.log(page,totalPages);
            if(page<totalPages){
                dispatch(getHandlerChangePage(page+1)) ;
            }else{
                dispatch(getHandlerChangePage(1)) ;
            }
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);